<script lang="tsx">
/**
 * 表单弹窗
 */
export default {
  name: "dialog-sheet-form"
}
</script>

<script lang="tsx" setup>
import {ref, defineProps, watch} from "vue"
import DialogSheetFormManager from "./dialog-sheet-form-manager.ts"
import SheetForm from "../../components/business/sheet-form/index.vue"
import {ElMessageBox} from "element-plus"
import {cloneDeep} from "lodash";
import DialogForm from "../../components/business/dialog-form/index.vue";
import SheetFormManager from "../../components/business/sheet-form/sheet-form-manager.ts";

/**
 * 定义props
 */
const props = defineProps<{
  dialogSheetFormModel: DialogSheetFormManager<any>;
  reflections?: any;
}>()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (event: "submit", params: any): void;
}>()

/**
 * 弹窗模型
 */
const dialogSheetFormModel = ref<DialogSheetFormManager<any>>()
/**
 * 表单模型
 */
const sheetFormModel = ref<SheetFormManager<any>>()

/**
 * 监听
 */
watch(() => props.dialogSheetFormModel, function (newValue) {
  if (newValue) {
    dialogSheetFormModel.value = newValue
    sheetFormModel.value = newValue.sheetForm
  }
}, {
  deep: true,
  immediate: true
})

/**
 * 显示表单
 */
const sheetFormRef = ref()
const dialogFormRef = ref()

/**
 * 显示
 */
const show = () => {
  dialogFormRef.value.show()
}

/**
 * 初始化表单数据
 */
const initFormData = () => {
  sheetFormRef.value.initFormData()
}

/**
 * 关闭
 */
const close = () => {
  dialogFormRef.value.close()
}

/**
 * 获取表单数据
 */
const getFormData = () => {
  return sheetFormRef.value.getFormData()
}

/**
 * 设置表单数据
 */
const setFormData = (data: any) => {
  const deepData = cloneDeep(data)
  sheetFormRef.value.setFormData(deepData)
}

/**
 * 提交表单
 */
const handleSubmit = async () => {
  await ElMessageBox.confirm("是否确认提交？", "提交", {
    type: "success"
  })
  const formData = await getFormData()
  emit("submit", formData)
}

/**
 * 暴露
 */
defineExpose({
  show,
  initFormData,
  getFormData,
  setFormData,
  handleSubmit,
  close
})
</script>

<template>
  <div class="dialog-sheet-form" v-if="dialogSheetFormModel">
    <DialogForm 
      ref="dialogFormRef"
      :dialogFormModel="dialogSheetFormModel"
    >
      <template #default>
        <div v-if="sheetFormModel" class="form-content">
          <SheetForm ref="sheetFormRef" :SheetFormModel="sheetFormModel"
                     :reflections="props.reflections"/>
        </div>
      </template>
      
      <template #footer>
        <div class="form-bottom">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </template>
    </DialogForm>
  </div>
</template>

<style lang="scss" scoped>
.dialog-sheet-form {
  :deep(.form-bottom) {
    text-align: center;
    padding: 0;
  }
}
</style>